<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		#div2{
			width: 200px;
			height: 200px;
			background-color: skyblue;
			margin-top: 5px;
		}
	</style>
	<body>
		<label>第一题</label><br>
		<button id="btn1" onclick="btnClick()">按钮1</button>
		<button id="btn2" >按钮2</button>
		<button id="btn3" >按钮3</button><br>
		<label>第二题</label><br>
		<div id="div1" onmouseenter="EchangeColor()" onmouseleave="LchangeColor()" onmousemove="MchangeColor()">	
		</div>
		<label>第三题</label><br>
		<input type="text" id="id1" value="" onfocus="userfocus()" onblur="userblur()" placeholder="请输入账号"/><br>
		<input type="password" name="" id="id2" onfocus="pwdfocus()" onblur="pwdblur()" placeholder="请输入密码"/><br>
		<button type="button" onclick="judge()">提交</button><br>
		<label>第四题</label><br>
		<button type="button" id="dbtn1" onclick="addlister()">添加监听器</button>
		<button type="button" id="dbtn2" onclick="removelister()">删除监听器</button>
		<div id="div2"></div>
	</body>
	<script type="text/javascript">
		// 1.按钮和DIV的单击事件（三种绑定方式）
		// 1
		function btnClick(){
			console.log('按钮被点击了')
		}
		// 2
		document.getElementById('btn2').onclick = btnClick;
		// 3
		document.getElementById('btn3').addEventListener('click',btnClick);
		
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function EchangeColor ()
		{
			document.getElementById('div1').style.backgroundColor = 'blue'
		}
		function LchangeColor ()
		{
			document.getElementById('div1').style.backgroundColor = 'red'
		}
		function MchangeColor ()
		{
			console.log("执行成功");
		}
		
		// 3.登入页面
		// 用户名输入框，
		// 密码输入框，
		// 提交按钮
		
		
		// 任务   
		// 3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		function userfocus()
		{
			console.log("用户在输入名称");
		}
		//3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		function userblur()
		{
			var span = document.getElementById('id1').value
			if (span == "") {
				alert('没有输入用户名');
			}
		}
		//3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		function pwdfocus()
		{
			console.log("用户在输入密码");
		}
		//3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function pwdblur()
		{
			var span = document.getElementById('id2').value 
			if (span == "") {
				alert('没有输入密码');
			}
		}
		//3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		//密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function judge()
		{
			var flag = true;
			if (document.getElementById('id1').value == "" && document.getElementById('id2').value == "") {
				alert('账号密码均为空');
				flag = false;
			}
			if (flag) {
				if (document.getElementById('id1').value == "") {
					alert('账号为空');
				}
				if (document.getElementById('id2').value == "") {
					alert('密码为空');
				}
			}
		}
	
		// 4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。
		function judgedivMove ()
		{
			console.log('移动中.....');
		}
		function addlister ()
		{
			document.getElementById('div2').addEventListener('mousemove',judgedivMove);
		}
		function removelister ()
		{
			document.getElementById('div2').removeEventListener('mousemove',judgedivMove);
		}
	</script>
</html>
